<template>
  <uv-popup ref="popup" :closeable="true" title="123">
    <view class="popup-header"> 苏享家人脸核身个人信息处理授权书</view>
    <scroll-view scroll-y style="height: 300px" @scrolltolower="scrollToLower">
      <!-- 这里放置你的滚动内容 -->
      <view class="popup-content">
        <view class="content" v-html="container"></view>
      </view>
    </scroll-view>
    <view class="popup-buttom">
      <uv-button type="primary" text="同意本条款" :disabled="!isSubmit" customStyle="margin-top: 10px;border-radius: 20px;" @click="handleSubmit"></uv-button>
    </view>
  </uv-popup>
</template>

<script>
import { getFaceH5, getFaceMiniprogram } from '@/api/bestSign'
import { getPrivacy } from '@/api/common'
import { bestsignFaceHost, tencentFactHost } from '@/common/bestsign/config'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'popupRecognition',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      form: {},
      checkboxValue: [true],
      safeAreaInsets: 0,
      isSubmit: false,
      scene: '',
      container: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.form.name = this.$Route.query.name
    console.log(this.$Route.query)
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { data } = await getPrivacy({ subtitle: 'face_agreement' })
      this.container = data
    },
    handleOpen({ scene }) {
      this.getData()
      this.scene = scene
      this.$refs.popup.open('bottom')
    },
    submit() {
      if (this.checkboxValue.length === 0) {
        this.$refs.popup.open('bottom')
      } else {
        this.handleConfirm()
      }
    },
    scrollToLower(e) {
      this.isSubmit = true
    },
    async handleConfirm() {
      const { id = '' } = this.$Route.query
      let url = ''
      // #ifdef MP-WEIXIN
      url = `/pages/subpackage/face-recognition/result?id=${id}&scene=${this.scene}`
      // #endif

      // #ifdef APP-PLUS
      url = `sxj://pages/subpackage/face-recognition/result?id=${id}&scene=${this.scene}`
      // #endif

      // #ifdef H5
      url = `${this.$Helper.getRootUrl()}pages/subpackage/face-recognition/result?id=${id}&scene=${this.scene}`
      // #endif

      // #ifndef MP-WEIXIN
      const { data, errcode } = await getFaceH5({ url })
      let openUrl = data.url
      if (openUrl.indexOf(tencentFactHost) > -1) {
        openUrl = openUrl.replace(tencentFactHost, bestsignFaceHost)
      }
      if (errcode === 0) {
        this.$ROUTE.go(openUrl)
      }
      // #endif

      // #ifdef MP-WEIXIN
      const RES = await getFaceMiniprogram({ url })
      if (RES.errcode === 0) {
        this.$ROUTE.go(RES.data.url, { scene: 'faceAuth' })
      }
      // #endif
    },
    handleSubmit() {
      this.handleConfirm()
    },
  },
}
</script>

<style lang="scss" scoped>
.popup-header {
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 10px 0;
}
.popup-content {
  padding: 0px 20px 30px;
  .content {
    font-size: 24rpx;
  }
  .title {
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
  }
}
.popup-buttom {
  padding: 0 20px 10px;
}
.preview-img {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  .image {
    width: 180px;
    height: 250px;
    background: pink;
  }
}
.fixed-bottom {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  padding: 15px;
  .certificate {
    color: $uv-primary;
  }
  ::v-deep .uv-checkbox__label-wrap {
    flex-direction: row;
    // color: $uv-primary;
  }
}
</style>
